<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
    <style>
        body {
            margin: 0;
        }
        
        * {
            box-sizing: border-box;
        }
        
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        a {
            color: inherit;
            font-size: inherit;
            text-decoration: none;
        }
        
        .nav {
            width: 100%;
            height: 40px;
            background-color: #F5F5F5;
        }
        
        .container {
            width: 1200px;
            margin: 0 auto;
        }
        
        .container-nav {
            display: flex;
            justify-content: space-between;
        }
        
        .right-nav {
            display: flex;
        }
        
        .container-nav a {
            font-size: 13px;
            color: #999;
        }
        
        .nav .container-nav li {
            height: 41px;
            line-height: 40px;
            padding: 0 20px;
        }
        
        .container-nav a:hover {
            color: #F10180;
        }
        
        .clear {
            clear: both;
        }
        /*第二部分的css代码*/
        
        .container-header {
            display: flex;
            justify-content: space-between;
        }
        
        .left-header img {
            width: 250px;
            height: 100px;
        }
        
        .right-header {
            width: 550px;
            height: 100px;
        }
        
        .right-header li {
            /*width: 200px;*/
            float: left;
        }
        
        .right-header img {
            width: 126px;
            height: 100px;
        }
        
        .shoppinga {
            display: inline-block;
            width: 23px;
            height: 30px;
            position: relative;
            top: 8px;
            background-image: url(../img/header.png);
            background-position: 0 -55px;
        }
        
        .changered {
            position: relative;
            display: inline-block;
            width: 116px;
            height: 50px;
            text-align: center;
        }
        
        .changered:hover {
            border: 1px solid #666;
            border-bottom-color: transparent;
        }
        
        .right-header:hover .shopping-box {
            display: block;
        }
        
        .shopping {
            position: relative;
            top: 25px;
            left: 10px;
            font-size: 15px;
        }
        
        .shopping-box {
            position: absolute;
            top: 50px;
            left: -235px;
            border: 1px solid #666;
            width: 350px;
            background-color: white;
            font-size: 12px;
            height: 100px;
            display: none;
            line-height: 100px;
        }
        
        .shopping-box li {
            width: 300px;
            text-align: center;
        }
        
        .shopping-box a {
            color: #E3007E;
        }
        
        .zero {
            display: inline-block;
            width: 15px;
            height: 15px;
            line-height: 15px;
            position: absolute;
            left: 12px;
            top: 5px;
            text-align: center;
            color: white;
            background-color: #E3007E;
            border-radius: 50px;
        }
        /*第三部分css代码*/
        
        header {
            width: 100%;
            background-color: #E3007E;
            z-index: 100;
        }
        
        .container-box {
            color: #F5F5F5;
            display: flex;
            justify-content: space-between;
        }
        
        .left-box a,
        .right-box a {
            display: inline-block;
            font-size: 18px;
            width: 70px;
            text-align: center;
            height: 45px;
            margin: 0 5px;
            line-height: 45px;
        }
        
        .container-box a:hover {
            background-color: #F10180;
        }
        
        .current {
            background-color: #BD1067;
        }
        
        .width a {
            width: 90px;
        }
        
        .width1 a {
            width: 90px;
            margin-left: 0;
        }
        
        .left-box {
            width: 700px;
            display: flex;
            justify-content: space-between;
        }
        
        .right-box {
            width: 120px;
            display: flex;
            justify-content: space-between;
        }
        
        .white {
            border-top: 5px solid #F5F5F5;
        }
        
        .fenlei,
        .yugao {
            display: inline-block;
            position: relative;
            left: -5px;
            top: 8px;
        }
        
        .more-li {
            position: relative;
        }
        
        .more {
            position: absolute;
            width: 575px;
            left: -500px;
            height: 270px;
            z-index: 100;
            background-color: white;
            display: none;
            padding-left: 10px;
            border: 1px solid #666;
        }
        
        .more img {
            width: 170px;
            height: 100px;
            border-radius: 10px;
        }
        
        .more li {
            width: 180px;
            height: 110px;
            margin-top: 15px;
            position: relative;
            overflow: hidden;
            float: left;
        }
        
        .ceng {
            width: 170px;
            border-radius: 10px;
            position: absolute;
            top: 50px;
            left: 5px;
            height: 100px;
            transition: all 0.3s linear;
            background: linear-gradient(transparent, black);
        }
        
        .more-li li:nth-child(1):hover .ceng,
        .more-li li:nth-child(2):hover .ceng,
        .more-li li:nth-child(3):hover .ceng,
        .more-li li:nth-child(4):hover .ceng,
        .more-li li:nth-child(5):hover .ceng {
            top: 20px;
        }
        
        .more-li li:nth-child(1):hover p,
        .more-li li:nth-child(2):hover p,
        .more-li li:nth-child(3):hover p,
        .more-li li:nth-child(4):hover p,
        .more-li li:nth-child(5):hover p {
            top: 30px;
        }
        
        .morea:hover .sanjiao {
            position: relative;
            top: -6px;
            border-bottom: 5px solid #F5F5F5;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
        }
        
        .more-li:hover .more {
            display: block
        }
        
        p {
            text-align: center;
            top: 60px;
            width: 170px;
            position: absolute;
            transition: all 0.3s linear;
        }
        /*第四部分代码*/
        
        main {
            width: 100%;
            height: 500px;
            background-image: url(../img/lunbo_bg.jpg);
            background-size: 100% 100%;
        }
        
        .lunbo {
            width: 1200px;
            height: 470px;
            position: relative;
            top: 15px;
            background-color: white;
            border: 1px solid #999;
        }
        
        .lunbo a {
            display: inline-block;
        }
        
        .lunbo li {
            width: 1200px;
            height: 400px;
            display: none;
        }
        
        .lunbo img {
            width: 1160px;
            margin-left: 20px;
            margin-top: 20px;
        }
        
        .lunboli {
            overflow: hidden;
        }
        
        .lunbo .run {
            display: block;
        }
        
        .container-main {
            position: relative;
            /*overflow:hidden;*/
        }
        
        .img-click span {
            position: absolute;
            width: 40px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            background-color: #666;
            opacity: 0.6;
            font-size: 25px;
            /*z-index: -1;*/
            color: #F5F5F5;
            top: calc(400px / 2);
            cursor: pointer;
            transition: all 0.3s linear;
        }
        
        .prev {
            left: -20px;
        }
        
        .next {
            right: -20px;
        }
        
        .scroll {
            position: absolute;
            /*top:35px;*/
            bottom: 0;
            left: 100px;
        }
        
        .scroll span:nth-child(2) {
            text-align: center;
        }
        
        .scroll span {
            display: inline-block;
            width: 240px;
            text-align: center;
            height: 30px;
            cursor: pointer;
          
        }
        
        .current1 {
            border-bottom: 2px solid red;
        }
        
        .center {
            display: flex;
            justify-content: space-between;
        }
        
        .center li,
        .center img {
            width: 380px;
            height: 100px;
        }
        
        .center li {
            position: relative;
        }
        
        footer {
            width: 100%;
            height: 60px;
            background-image: url(../img/title_v2.jpg);
            background-size: 100% 100%;
        }
        
        .ceng1 {
            width: 380px;
            height: 100px;
            background: radial-gradient(transparent, black);
            opacity: 0.4;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .center li:hover .ceng1 {
            opacity: 0.6;
        }
        
        .containerlast {
            width: 1200px;
            height: 60px;
            background-image: url(../img/title_v2.jpg);
            background-size: 100% 100%;
        }
        
        aside {
            width: 30px;
            height: 1200px;
            position: fixed;
            top: 0;
            right: 0;
            /*z-index: 100;*/
            /*overflow: hidden;*/
            background-color: #262626;
        }
        
        .container-aside {
            width: 30px;
            height: 800px;
            z-index: 100;
            position: relative;
            top: 200px;
            text-align: center;
        }
        
        .zhanghao {
            width: 30px;
            height: 55px;
            background-image: url(../img/zhanghao.png);
        }
        /*.xin:hover,
        .qiandai:hover,
        .wujiaoxin:hover,
        .bi:hover,
        .top:hover {
            opacity: 0.9;
        }*/
        
        .gouwudai {
            width: 30px;
            height: 155px;
            background-image: url(../img/gouwu.png);
        }
        
        .qiandai {
            width: 30px;
            height: 35px;
            margin-left: 5px;
            margin-top: 5px;
            background-image: url(../img/qiandai.png);
        }
        
        .xin {
            width: 30px;
            height: 28px;
            margin-left: 4px;
            margin-top: 7px;
            background-image: url(../img/xin.png);
        }
        
        .wujiaoxin {
            width: 25px;
            height: 30px;
            margin-left: 5px;
            margin-top: 5px;
            background-image: url(../img/wujiaoxing.png);
        }
        
        .bi {
            width: 30px;
            height: 30px;
            position: relative;
            top: 230px;
            left: 3px;
            background-image: url(../img/bi.png);
        }
        
        .top {
            width: 25px;
            height: 35px;
            position: relative;
            top: 240px;
            left: 6px;
            background-image: url(../img/top.png);
        }
        
        .zhanghao {
            position: relative;
        }
        
        .zhanghao .zhanghao-box {
            height: 280px;
            width: 280px;
            right: -280px;
            z-index: -1;
            transition: all 0.3s linear;
            background-color: #F5F5F5;
            position: absolute;
            border: 1px solid #999;
        }
        
        .zhanghao:hover .zhanghao-box {
            right: 30px;
        }
        
        .helloxiong {
            display: inline-block;
            width: 50px;
            height: 50px;
            position: relative;
            top: 20px;
            background-image: url(../img/header.png);
            background-position: 0px -185px;
        }
        
        .hello,
        .news,
        .julebu {
            height: 110px;
        }
        
        .news {
            width: 240px;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
            margin: 0 auto;
        }
        
        .hello p {
            width: 280px;
            text-align: center;
        }
        
        .hello a {
            color: red;
        }
        
        .dingdan {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-top: 10px;
            background-image: url(../img1/sprite.png);
            background-position: -195px -55px;
        }
        
        .xiaoxi {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-top: 10px;
            background-image: url(../img1/sprite.png);
            background-position: -196px -85px;
        }
        
        .news {
            display: flex;
            justify-content: space-between;
        }
        
        .news section {
            margin-top: 10px;
            height: 90px;
        }
        
        .news section:nth-child(1) {
            border-right: 1px solid #999;
        }
        
        .news p {
            position: relative;
            margin: 0;
            left: -20px;
            top: 10px;
        }
        
        .news section {
            width: 120px;
        }
        
        .julebu {
            line-height: 60px;
            margin-left: 100px;
        }
        
        .youhuiquan {
            width: 130px;
            height: 28px;
            line-height: 30px;
            position: absolute;
            right: -110px;
            transition: all 0.3s linear;
            z-index: -1;
            background-color: white;
        }
        
        .four,
        .five {
            right: -110px;
        }
        
        .qiandai:hover .youhuiquan,
        .xin:hover .youhuiquan,
        .wujiaoxin:hover .youhuiquan,
        .bi:hover .youhuiquan,
        .top:hover .youhuiquan {
            right: 32px;
        }
        
        .cha {
            display: inline-block;
            width: 20px;
            height: 20px;
            position: relative;
            left: 100px;
            background-image: url(../img/sprite.png);
            background-position: -193px -170px;
        }
        /*第一部分的代码*/
        
        .bg-white {
            border: 1px solid transparent;
            border-bottom: none;
        }
        
        .bg-white:hover {
            background-color: white;
            border-color: red;
        }
        .bg-white{
            position: relative;
        }
        .right-nav .bg-border .cover{
             height: 3px;
             position: absolute;
            top: -1px;
            background-color: white;
        }
        .right-nav .five .cover{
              height: 3px;
             position: absolute;
             left:218px;
            top: -1px;
            background-color: white;
        }
        .right-nav .one .cover{
            width: 94px;
           
        }
        .right-nav .two .cover,
        .right-nav .three .cover
       {
           width: 107px;
        } .right-nav .bg-white .two,
        .right-nav .bg-white .three{
            width: 109px;
        }
        .right-nav .bg-white .four{
            width: 122px;
        }
        .right-nav .bg-white .five{
           left: -218px;
        }
        
        .right-nav .four .cover{
          width: 120px;
        }
        .right-nav .five .cover{
            width: 80px;
        }
        .bg-border{
            width: 300px;
            position: absolute;
             border: 1px solid red;
             position: absolute;
             top: 39px;
            left: -1px;
            display: none;
            background-color: white;
        }
        .bg-white:hover .bg-border{
            display: block;
        }
        .sanjiao{
             font-size: 0;
            position: relative;
            display: inline-block;
            border-top: 5px solid gray;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid transparent;
            margin-left: 5px;
            vertical-align: -3px;
        }
        .sanjiaotop{
            margin-left: 20px;
        }
        .bg-white:hover .sanjiao{
             position: relative;
             vertical-align: 2px;
             border-bottom: 5px solid #F10180;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
        }
        

    </style>
</head>

<body>
    <nav class="nav">
        <div class="container container-nav">
            <ul class="left-nav">
                <li class="bg-white"><a href="#">河南</a><span class="sanjiao sanjiaotop"></span></li>
            </ul>
            <ul class="right-nav">
                <li class="bg-white"><a href="#">请登录</a><span class="sanjiao"></span>
                    <ul class="nav-sub bg-border one">
                        <li class="cover"></li>
                        <li><a href="#">请登录</a></li>
                        <li><a href="#">请登录</a></li>
                        <li><a href="#">请登录</a></li>
                    </ul>
                </li>
                <li><a href="#">注册</a></li>
                <li><a href="#">签到有礼</a></li>
                <li class="bg-white"><a href="#">我的订单</a><span class="sanjiao"></span>
                <ul class="nav-sub bg-border two">
                        <li class="cover"></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">我的订单</a></li>
                    </ul></li>
                <li class="bg-white"><a href="#">我的特卖</a><span class="sanjiao"></span>
                <ul class="nav-sub bg-border three">
                        <li class="cover"></li>
                        <li><a href="#">我的特卖</a></li>
                        <li><a href="#">我的特卖</a></li>
                        <li><a href="#">我的特卖</a></li>
                    </ul></li></li>
                <li class="bg-white"><a href="#">会员俱乐部</a><span class="sanjiao"></span>
                <ul class="nav-sub bg-border  four">
                        <li class="cover"></li>
                        <li><a href="#">我的俱乐部</a></li>
                        <li><a href="#">我的俱乐部</a></li>
                        <li><a href="#">我的俱乐部</a></li>
                    </ul></li></li>
                <li class="bg-white"><a href="#">更多</a><span class="sanjiao"></span>
                <ul class="nav-sub bg-border  five">
                        <li class="cover"></li>
                        <li><a href="#">更多</a></li>
                        <li><a href="#">更多</a></li>
                        <li><a href="#">更多</a></li>
                    </ul></li></li>
            </ul>

        </div>
    </nav>

    <!--第二部分的html代码-->
    <div class="container container-header">
        <ul class="left-header">
            <li>
                <a href="#"><img src="../img/logo.png" alt=""></a>
            </li>
        </ul>
        <ul class="right-header">
            <li>
                <a href="#"><img src="../img/logo_img01.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="../img/logo_img02.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="../img/logo_img03.png" alt=""></a>
            </li>
            <li class="shopping">
                <a href="#" class="changered">
                    <span class="shoppinga"></span>
                    <span class="zero">0</span>我的购物袋</a>
                <ul class="shopping-box">
                    <li>好像还未登陆!<a href="#">马上登录</a>查看购物袋吧！</li>
                </ul>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
    <!--第三部分html代码-->
    <header>
        <div class="container container-box">
            <ul class="left-box">
                <li class="current"><a href="#">首页</a></li>
                <li class="width1"><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li class="width"><a href="#">家具家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li class="width"><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li class="more-li"><a href="#" class="morea">更多<span class="sanjiao white"></span></a>
                    <ul class="more">
                        <li>
                            <a href="#"><img src="../img/more01.jpg" alt=""></a>
                            <div class="ceng"></div>
                            <p>女装</p>
                        </li>
                        <li>
                            <a href="#"><img src="../img/more02.jpg" alt=""></a>
                            <div class="ceng"></div>
                            <p>女装</p>
                        </li>
                        <li>
                            <a href="#"><img src="../img/more03.jpg" alt=""></a>
                            <div class="ceng"></div>
                            <p>女装</p>
                        </li>
                        <li>
                            <a href="#"><img src="../img/more04.jpg" alt=""></a>
                            <div class="ceng"></div>
                            <p>女装</p>
                        </li>
                        <li>
                            <a href="#"><img src="../img/more05.jpg" alt=""></a>
                            <div class="ceng"></div>
                            <p>女装</p>
                        </li>
                        <div class="clear"></div>
                    </ul>
                </li>
            </ul>
            <ul class="right-box">
                <li><a href="#"><span class="fenlei"><img src="../img/fenlei.png" alt=""></span>分类</a></li>
                <li><a href="#"><span class="yugao"><img src="../img/yugao.png" alt=""></span>预告</a></li>
            </ul>
        </div>
    </header>
    <!--第四部分html代码-->
    <main>

        <div class="container container-main">
            <ul class="lunbo">
                <li class="run">
                    <a href="#"><img src="../img/lunbo01.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../img/lunbo02.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../img/lunbo03.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../img/lunbo04.jpg" alt=""></a>
                </li>
                <section class="scroll">
                    <span class="current1">时尚风暴 最高满199减40 </span>
                    <span>新人专享2重礼 </span>
                    <span>净水节 最高500yuan红包 </span>
                    <span>安莉芳集团 跨专场3件8折 </span>
                </section>
            </ul>

            <div class="img-click">
                <span class="prev">&lt;</span>
                <span class="next">&gt;</span>
            </div>
        </div>
    </main>
    <!--第五部分html代码-->
    <div class="container container-footer">
        <ul class="center">
            <li>
                <a href="#"><img src="../img/bg_v3.jpg" alt=""></a>
                <section class="ceng1"></section>
            </li>
            <li>
                <a href="#"><img src="../img/bg_v3.jpg" alt=""></a>
                <section class="ceng1"></section>
            </li>
            <li>
                <a href="#"><img src="../img/bg_v3.jpg" alt=""></a>
                <section class="ceng1"></section>
            </li>
        </ul>
    </div>
    <footer>
        <div class="container containerlast"></div>
    </footer>
    <!--侧边栏-->
    <aside>
        <div class="container-aside">
            <div class="zhanghao">
                <div class="zhanghao-box">
                    <section class="hello"><span class="helloxiong"> <span class="cha"></span></span>
                        <p>你好！请<a href=#>登录</a>|<a>注册</a></p>
                    </section>
                    <section class="news">
                        <section><span class='dingdan'></span>
                            <p>我的订单</p>
                        </section>
                        <section><span class="xiaoxi"></span>
                            <p>我的消息</p>
                        </section>
                    </section>
                    <section class="julebu">我的俱乐部</section>

                </div>
            </div>
            <div class="gouwudai"></div>
            <div class="qiandai">
                <div class="youhuiquan one">我的优惠券</div>
            </div>
            <div class="xin">
                <div class="youhuiquan two">我的优惠券</div>
            </div>
            <div class="wujiaoxin">
                <div class="youhuiquan three">我的优惠券</div>
            </div>
            <div class="bi">
                <div class="youhuiquan four">我的优惠券</div>
            </div>
            <div class="top">
                <div class="youhuiquan five">我的优惠券</div>
            </div>
        </div>
    </aside>
    <section style="height:2000px;"></section>
</body>

</html>
<script>
    var lis = document.querySelectorAll('.lunbo li')
    var spans = document.querySelectorAll('.scroll span')
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var lunbo = document.querySelector('.lunbo')
    var imclickspan1 = document.querySelector('.img-click span')
    //   var current=document.querySelector('.current1')
    var index = 0;
    function showImg() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
            spans[i].className = '';
        }
        index++;
        if (index == 4) {
            index = 0;
        }
        lis[index].className = 'run';
        spans[index].className = 'current1';
    }
    function prevImg() {
        index = index == 0 ? lis.length - 1 : index--;
        showImg()
    }
    function nextImg() {
        index = index == lis.length - 1 ? 0 : index++;
        showImg()

    }
    var timer = setInterval(showImg, 1000);
    for (var i = 0; i < spans.length; i++) {
        spans[i].index = i;
        spans[i].onmouseover = function () {
            clearInterval(timer);
            timer = null;
            index = this.index;
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
                spans[i].className = '';
            }
            lis[index].className = 'run';
            spans[index].className = 'current1';

        }
        spans[i].onmouseout = function () {
            if (timer != null) {
                return; a
            }
            timer = setInterval(showImg, 1000);
        }
    }
    //放图片停
    lunbo.onmouseover = function () {
        clearInterval(timer);
        timer = null;
        // prev.style.display = 'block';
        // next.style.display = 'block';
        prev.style.left = '20px';
        next.style.right = '20px';

    }
    lunbo.onmouseout = function () {
        if (timer != null) {
            return;
        }
        timer = setInterval(nextImg, 1000);
        prev.style.left = '-20px';
        next.style.right = '-20px';
    }
    prev.onmouseover = function () {
        prev.style.left = '20px';
        next.style.right = '20px';
    }
    prev.onmouseout = function () {
        prev.style.left = '-20px';
        next.style.right = '-20px';
    }
    next.onmouseover = function () {
        prev.style.left = '20px';
        next.style.right = '20px';
    }
    next.onmouseout = function () {
        prev.style.left = '-20px';
        next.style.right = '-20px';
    }
    prev.onclick = function () {
        prevImg();
    }
    next.onclick = function () {
        nextImg();
    }
    var cha = document.querySelector('.cha')
    var zhanghaoBox = document.querySelector('.zhanghao-box')
    cha.onclick = function () {
        zhanghaoBox.style.display = 'none';
    }
    var top = document.querySelector('.top')
    var scroll = document.scrollingElement.scrollTop;
    top.onclick = function () {
        scroll.style.top = '0';
    }
    //固定header
    var header=document.querySelector('header');
    window.onscroll = function(){
        var scrollTop = document.scrollingElement.scrollTop;
        if (scrollTop >= 100) {
           header.style.position='fixed';
           header.style.top='0';
        }else{
            header.style.cssText='';
        }

    }


    //遍历cover
    // var navLis=document.querySelectorAll('.right-nav li');
    // for(var i=0;i<navLis.length;i++){
    //     navLis[i].index=i;
    //     navLis[i].onmouseover=function(){
    //         if(this.children[1]){
    //             this.children[1].children[0].style.width=
    //             this.clientWidth+'px'
    //         }
    //         if(this.index==6){
    //             this.children[1].style.width=this.offsetWidth+'px'
    //         }
    //     }
    // }

</script>